<template>
  <!-- 三級分类 -->
  <el-form :inline="true" :disabled="!isShow">
    <el-form-item label="一级分类">
      <el-select
        v-model="category1Id"
        @change="category1Change"
        placeholder="请选择"
      >
        <el-option
          v-for="category1 in category1List"
          :key="category1.id"
          :label="category1.name"
          :value="category1.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select
        v-model="category2Id"
        @change="category2Change"
        placeholder="请选择"
      >
        <el-option
          v-for="category2 in category2List"
          :key="category2.id"
          :label="category2.name"
          :value="category2.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="category3Id" placeholder="请选择">
        <el-option
          v-for="category3 in category3List"
          :key="category3.id"
          :label="category3.name"
          :value="category3.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
import categoryApi from "@/api/category";
import attrApi from "@/api/attr";
export default {
  name: "CategorySelector",
  props: ["categoryList", "isShow"],
  data: () => {
    return {
      category1Id: undefined,
      category2Id: undefined,
      category3Id: undefined,
      category1List: [],
      category2List: [],
      category3List: [],
    };
  },
  methods: {
    // 获取一级分类数据
    async getCategory1List() {
      try {
        let result = await categoryApi.getCategory1List();
        this.category1List = result.data;
        // console.log(result.data);
      } catch (error) {
        console.error("获取一级分类数据失败,请重试");
      }
    },
    // 获取二级分类数据
    async getCategory2List(category1Id) {
      try {
        let result = await categoryApi.getCategory2List(this.category1Id);
        this.category2List = result.data;
      } catch (error) {
        console.error("获取二级分类数据失败,请重试");
      }
    },
    // 获取三级分类数据
    async getCategory3List(category2Id) {
      try {
        let result = await categoryApi.getCategory3List(this.category2Id);
        this.category3List = result.data;
      } catch (error) {
        console.error("获取三级分类数据失败,请重试");
      }
    },

    // 获取属性值列表
    async getAttrInfo() {
      const { category1Id, category2Id, category3Id } = this;
      let result = await attrApi.getAttrInfo(
        category1Id,
        category2Id,
        category3Id
      );
      this.$emit("update:categoryList", result.data);
      // console.log(result.data);
    },

    // 改变一级分类
    category1Change(category1Id) {
      this.category2List = [];
      this.category2Id = "";
      this.category3List = [];
      this.category3Id = "";
      this.getCategory2List(category1Id);
    },

    // 改变二级分类
    category2Change(category2Id) {
      this.category3List = [];
      this.category3Id = "";
      this.getCategory3List(category2Id);
    },
  },
  watch: {
    category3Id: {
      handler(nval, oval) {
        const { category1Id, category2Id, category3Id } = this;
        try {
          if (nval) {
            // let result = await attrApi.getAttrInfo(
            //   category1Id,
            //   category2Id,
            //   category3Id
            // );
            let result = this.getAttrInfo();
            this.$emit("update:categoryList", result.data);
            this.$emit("update:category3Id", category3Id);
          } else if (!nval) {
            this.$emit("update:categoryList", []);
          }
        } catch (error) {
          console.error("请求属性列表失败,请重试");
        }
      },
    },
  },

  mounted() {
    // 一级分类列表显示
    this.getCategory1List();
    // 请求属性值列表
    this.$bus.$on("getAttrInfo", this.getAttrInfo);
  },
};
</script>
<style></style>
